<template>
  <div class="goods-cart-list-box">
    <div class="title-box">
      <div class="title">购物车</div>
      <div class="clear" @click="clear">清空</div>
    </div>
    <div class="cart-list-box">
      <ul>
        <li v-for="(cart, index) in validCartList" :key="index">
          <div class="item-box">
            <div class="name">{{ cart.name }}</div>
            <div class="right">
              <div class="price">￥{{ cart.amount * cart.price }}</div>
              <div class="button">
                <goods-button :amount="cart.amount" :food="cart"></goods-button>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import goodsButton from 'components/goods/goods-button'
import { mapMutations, mapGetters } from 'vuex'

export default {
  name: 'goods-cart-list',
  components: {
    goodsButton
  },
  methods: {
    ...mapMutations(['clear'])
  },
  computed: {
    ...mapGetters({
      validCartList: 'getValidCartList'
    })
  }
}
</script>

<style lang="stylus" scoped>
@import "~assets/styles/variable.styl"
@import "~assets/styles/mixin.styl"

.goods-cart-list-box
  display flex
  flex-direction column
  width 100%
  height 100%
  .title-box
    display flex
    flex-direction row
    justify-content space-between
    padding 0 18px
    height 40px
    line-height 40px
    background-color #f3f5f7
    border-bottom 1px $color-row-line solid
    .title
      font-size $fontsize-medium
      font-weight 100
      color rgb(7, 17, 27)
    .clear
      font-size $fontsize-small
      color rgb(0, 160, 220)
  .cart-list-box
    display flex
    flex-direction column
    background-color #ffffff
    ul
      margin 0 18px
      li
        height 46px
        border-bottom 1px $color-row-line solid
        .item-box
          display flex
          flex-direction row
          justify-content space-between
          height 24px
          .name
            margin-top 16px
            font-size 14px
            color rgb(7, 17, 37)
          .right
            display flex
            flex-direction row
            .price
              margin-top 16px
              margin-right 12px
              font-size 10px/12px
              color rgb(240, 20, 20)
            .button
              margin 12px 0
              height 24px
</style>
